<template>
 <div id="recommend">
  <letter :list="list"></letter>
  <newest :music="music"></newest>
  <router-link to="/down">
   <div class="main">
    <i class="iconfont icon-wangyiyunyinle"></i>
    <p>打开APP，发现更多好音乐 ></p>
    <span>网易公司版权所有©1997-2021 杭州乐读科技有限公司运营</span>
   </div>
  </router-link>
 </div>
</template>

<script>
import letter from "../../components/recommend/Letter.vue";
import newest from "../../components/recommend/Newest.vue";

export default {
 data: () => {
  return {
   list: [],
   music: [],
  };
 },
 methods: {
  async fn() {
   let res = await this._axios.get("/personalized");
   this.list = res.data.result.slice(0, 6);
   // console.log(res);
   // console.log(res.data.result);
   // console.log(this.list);
   let abs = await this._axios.get("/personalized/newsong");
   this.music = abs.data.result;
   // console.log(this.music);
  },
 },
 mounted() {
  this.fn();
 
 },
 components: {
  letter,
  newest,
 },
};
</script>

<style lang="scss" scoped>
#recommend {
   margin-top: _vw(224);
 .main {
  height: _vw(400);
  padding-top: _vw(120);
  text-align: center;
  box-sizing: border-box;
  i {
   font-size: _vw(80);
   color: red;
  }
  p {
   border: 1px solid red;
   margin: _vw(30) _vw(80) _vw(10);
   padding: _vw(20);
   border-radius: _vw(50);
   color: red;
  }
  span {
   font-size: _vw(24);
   color: #888888;
  }
 }
}
</style>
